<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <script src="./static/static/vue.min.js"></script>
    <script src="./static/static/axios.min.js"></script>
    <!-- 本地引入lib-master -->
    <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
    <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <el-form :model="dataForm" label-width="80px">
            <el-form-item label="用户姓名" prop="userName">
                <el-input v-model="dataForm.userName" placeholder="用户姓名" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="设置密码" prop="userPwd">
                <el-input v-model="dataForm.userPwd" placeholder="设置密码" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickName">
                <el-input v-model="dataForm.nickName" placeholder="用户昵称" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="idCard">
                <el-input v-model="dataForm.idCard" placeholder="身份证" style="width: 200px;"></el-input>
            </el-form-item>
            <el-form-item label="头像" prop="userImg">
                <el-upload class="avatar-uploader" action="http://localhost:88/api/user/house-user/upload"
                    :show-file-list="false" :on-success="handleAvatarSuccess">
                    <img v-if="dataForm.userImg" :src="dataForm.userImg" class="avatar" width="100%">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="手机号" prop="userPhone">
                <el-input v-model="dataForm.userPhone" placeholder="手机号" style="width: 200px;"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                baseUrl: "http://localhost:88/api",
                dataForm: {
                    userPhone: '',
                    userName: '',
                    userPwd: '',
                    rentCount: 0,
                    nickName: '',
                    idCard: '',
                    userImg: ''
                },
            }
        },
        methods: {
            // 表单提交
            dataFormSubmit() {
                axios.post(`${this.baseUrl}/user/house-user/register`, this.dataForm).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '注册成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.visible = false
                                location.href = './user_login.html'
                            }
                        })
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            },
            // 图片添加成功
            handleAvatarSuccess(res) {
                this.dataForm.userImg = res.url;
            },
        },
    })
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
</html>